<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游客管理</title>
    <!-- 引入vue包 -->
    <script src="/js/vue.js"></script>
    <!-- 引用element样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引用element组件包 -->
    <script src="/js/index.js"></script>
    <!-- 引入axios包--基于vue开发 -->
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 根据参数查询 和 添加数据 -->
    <el-row>
        <el-col :span="4">
            <el-input v-model="searchForm.account" placeholder="请输入账号"></el-input>
        </el-col>
        <el-col :span="4">
            <el-input v-model="searchForm.smallname" placeholder="请输入昵称"></el-input>
        </el-col>
        <el-col :span="4">
            <el-input v-model="searchForm.mobile" placeholder="请输入手机"></el-input>
        </el-col>
        <el-col :span="2">
            <el-button type="success" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" icon="el-icon-refresh"  @click="refresh">刷新</el-button>
        </el-col>
        <el-col :span="8"></el-col>
    </el-row>
    <!--    查询-->
    <el-table :data="tableData" border style="width: 100%" >
<!--        <el-table-column fixed width="90" prop="id" label="游客id"></el-table-column>-->
        <el-table-column width="160" prop="account" label="账号"></el-table-column>
<!--        <el-table-column width="160" prop="password" label="密码"></el-table-column>-->
        <el-table-column width="160" prop="name" label="真实姓名"></el-table-column>
        <el-table-column width="160" prop="smallname" label="昵称"></el-table-column>
        <el-table-column width="160" prop="sex" label="性别">
            <template slot-scope="scope">
                <div v-if="scope.row.sex == 0">男</div>
                <div v-else>女</div>
            </template>
        </el-table-column>
        <el-table-column width="160" prop="birthday" label="生日"></el-table-column>
        <el-table-column width="160" prop="mobile" label="手机"></el-table-column>
        <el-table-column width="160" prop="email" label="邮箱"></el-table-column>
        <el-table-column width="160" prop="qq" label="qq"></el-table-column>
        <el-table-column width="160" prop="zjno" label="证件号"></el-table-column>
        <el-table-column width="160" prop="state" label="状态">
            <template slot-scope="scope">
                <div v-if="scope.row.state == 0">禁用</div>
                <div v-else>正常</div>
            </template>
        </el-table-column>
        <el-table-column width="160" prop="cjtime" label="创建时间"></el-table-column>
        <el-table-column width="160" prop="gxtime" label="更新时间"></el-table-column>
        <el-table-column fixed="right" width="200" label="操作" width="140" align="center">
            <template slot-scope="scope">
                <el-button type="danger" @click="deleteDept(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10, 15, 20, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                //表格数据
                tableData: [],//返回的查询数据
                currentPage: 1,//页码
                pageSize: 5,//每页显示的数量
                total: 100,//分页总数量
                searchForm: {account: '',smallname:'',mobile:''},//查询携带的参数
            }
        },
        //加载时默认执行的方法
        created: function () {
            //调用封装的方法
            this.loadData();
        },
        methods: {//定义变量_this等于外面的this
            //封装请求数据的方法
            loadData() {
                var _this = this;
                axios.post('/tuser/queryPage', {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    data: {
                        "account": this.searchForm.account,
                        "smallname":this.searchForm.smallname,
                        "mobile":this.searchForm.mobile
                    }
                })
                    .then(function (response) {
                        console.log(response);
                        //判断是否执行成功
                        if (response.data.code == 200) {
                            _this.tableData = response.data.data.list;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //实行每页有多少条的方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.loadData();
            },
            //实现跳转页的方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.loadData();
            },
            //刷新
            refresh() {
                //原始js重新请求
                location.reload();
            },
            //查询方法
            search() {
                this.loadData();
                //搜索时,使页码为1
                this.currentPage=1;
            },
            //关闭方法
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //删除方法
            deleteDept(row) {
                this.$confirm('此操作将删除该游客, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    var _this = this;
                    axios.post("/tuser/delete/" + row.id)
                        .then(function (response) {
                            console.log(response);
                            if (response.data.code == 200) {
                                _this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                                _this.dialogFormVisible = false;
                                _this.loadData();
                            } else {
                                _this.$message("操作失败")
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                })
            },
        }
    })
</script>
</body>
</html>